<template>
  <view id="moreserve">
    <view class="body">
      <view
        class="son"
        v-for="(item, i) in sonlist"
        :key="i"
        @click="tosonitem(item.url)"
      >
        <view class="item">
          <image :src="item.img" class="logo" mode="widthFix" />
          <view class="tit">{{ item.tit }}</view>
        </view>
        <image src="@/static/index/right.png" class="right" mode="widthFix" />
      </view>
    </view>
  </view>
</template>


<script setup>
const sonlist = [
  {
    img: "../../static/user/dj.png",
    tit: "等级说明",
    url: "",
  },
  {
    img: "../../static/user/nav5.png",
    tit: "会员协议",
    url: "",
  },
  {
    img: "../../static/user/suo.png",
    tit: "隐私条款",
    url: "",
  },
  {
    img: "../../static/user/wenhao.png",
    tit: "常见问题",
    url: "",
  },
];
</script>

<style lang="scss">
#moreserve {
  width: 100%;
  .body {
    width: 94%;
    margin: auto;
    .son {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 0;
      box-sizing: border-box;
      border-bottom: solid 2rpx #ededed;
      .item {
        display: flex;
        align-items: center;
        .logo {
          width: 70rpx;
        }
        .tit {
          margin-left: 20rpx;
          color: #807c78;
          font-size: 0.9rem;
        }
      }
      .right {
        width: 40rpx;
      }
    }
  }
}
</style>
